<template>
  <div class="vip">
    <div class="vip-content">
      <div class="vip-title">用户信息</div>
      <div class="vip-content-box">
        <div class="vip-content-title">实名认证</div>
        <div class="progress-box">
          <div
            class="progress-item-box"
            v-for="(item, index) in progressList"
            :key="index"
          >
            <div
              :class="
                isSelect >= index ? 'progress-item-check' : 'progress-item'
              "
              @click="selectIndex(index)"
            >
              <div class="order-index">{{ index + 1 }}</div>
              <div class="progress-txt">{{ item }}</div>
            </div>
            <div class="progress-jt" v-if="index != 4">
              <img
                v-if="isSelect > index"
                src="../../assets/imgs/real-name-icon/jt-yellow.svg"
                alt=""
              />
              <img
                v-else
                src="../../assets/imgs/real-name-icon/jt.svg"
                alt=""
              />
            </div>
          </div>
        </div>
        <BaseMsg v-if="isSelect == 0" />
        <LegalPerson v-if="isSelect == 1" />
        <Beneficiary v-if="isSelect == 2" />
        <LegalConsent v-if="isSelect == 3" />
        <IDVerification v-if="isSelect==4"/>
      </div>
    </div>
  </div>
</template>
  <script setup>
import { reactive, ref } from "vue";
import BaseMsg from "../../components/RealName/BaseMsg.vue";
import LegalPerson from "../../components/RealName/LegalPerson.vue";
import Beneficiary from "../../components/RealName/Beneficiary.vue";
import LegalConsent from "../../components/RealName/LegalConsent.vue";
import IDVerification from "../../components/RealName/IDVerification.vue";
const progressList = [
  "填写企业基本信息",
  "填写企业法人代表信息",
  "填写受益所有人信息",
  "法人代表意愿确认",
  "证件验证",
];
const isSelect = ref(0);
const selectIndex = (index) => {
  isSelect.value = index;
};
</script>
      <style scoped lang="less">
.vip {
  padding: 1.5rem;
  box-sizing: border-box;
  .vip-content {
    width: 80rem;
    margin: 0 auto;
    // background: #fcf;
    padding: 2rem;
    box-sizing: border-box;
    .vip-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 1.125rem;
      color: #000000;
      line-height: 1.125rem;
      text-align: left;
      font-style: normal;
    }
    .vip-content-box {
      margin-top: 1.5rem;
      background: #fff;
      padding: 1.5rem;
      box-sizing: border-box;
      border-radius: 1rem;
      .vip-content-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 1.625rem;
        color: #000000;
        text-align: left;
        font-style: normal;
      }
      .progress-box {
        margin-top: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .progress-item-box {
          display: flex;
          justify-content: center;
          align-items: center;
          .progress-item {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 11.625rem;
            height: 6.125rem;
            background: #fff;
            border-radius: 0.375rem;
            border: 2px solid #c7c7c7;
            .order-index {
              background: #000000;
              width: 1.625rem;
              height: 1.625rem;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 1.125rem;
              color: #ffffff;
              line-height: 1.125rem;
              font-style: normal;
            }
            .progress-txt {
              margin-top: 0.5rem;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 0.875rem;
              color: #000000;
              font-style: normal;
            }
          }
          .progress-item-check {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 11.625rem;
            height: 6.125rem;
            background: rgba(208, 171, 119, 0.12);
            border-radius: 0.375rem;
            border: 2px solid #cca46b;
            .order-index {
              background: #cca46b;
              width: 1.625rem;
              height: 1.625rem;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 1.125rem;
              color: #ffffff;
              line-height: 1.125rem;
              font-style: normal;
            }
            .progress-txt {
              margin-top: 0.5rem;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 0.875rem;
              color: #cca46b;
              font-style: normal;
            }
          }
          .progress-jt {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 0.5rem;
          }
        }
      }
    }
  }
}
</style> 